<template>
  <div class="agency-home-container" v-loading="loading">
    <!-- 顶部留白 -->
    <div class="top-spacer"></div>
    
    <!-- 旅行社基本信息区域 -->
    <div class="agency-info-section">
      <div class="agency-header">
        <!-- 左侧头像区域 -->
        <div class="agency-avatar-container">
          <div class="agency-avatar">
            <img :src="agencyInfo.travelAgencyAvatar || defaultAvatar" alt="旅行社头像" class="avatar-img">
          </div>
        </div>
        
        <!-- 右侧基本信息区域 -->
        <div class="agency-basic">
          <h1 class="agency-name">{{ agencyInfo.travelAgencyName }}</h1>
          <div class="agency-meta">
            <div class="meta-item">
              <i class="el-icon-location-outline"></i>
              <span class="meta-text">{{ agencyInfo.province }} {{ agencyInfo.city }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-phone"></i>
              <span class="meta-text">{{ agencyInfo.officePhone }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-message"></i>
              <span class="meta-text">{{ agencyInfo.officeEmail }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-office-building"></i>
              <span class="meta-text">{{ agencyInfo.officeAddress }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 简介区域 -->
      <div class="agency-description">
        <p>{{ agencyInfo.travelAgencyIntroduction }}</p>
      </div>
    </div>

    <!-- 旅行社发布的跟团游列表 -->
    <div class="tours-section">
      <h2 class="section-title">热门跟团游</h2>
      
      <div v-if="tours.length === 0" class="no-tours">
        <el-empty description="该旅行社暂未发布跟团游"></el-empty>
      </div>
      
      <div v-else class="tour-list">
        <div v-for="tour in tours" :key="tour.groupTourID" class="tour-card">
          <div class="tour-image">
            <img :src="getTourImage(tour.groupTourID)" alt="旅游线路图片">
          </div>
          <div class="tour-content">
            <h3 class="tour-title">{{ tour.groupTourName }}</h3>
            <div class="tour-meta">
              <span class="meta-item"><i class="el-icon-location"></i> {{ tour.scenicAreaName }}</span>
              <span class="meta-item"><i class="el-icon-time"></i> {{ calculateDuration(tour.startDate, tour.endDate) }}天</span>
              <span class="meta-item"><i class="el-icon-date"></i> {{ formatDate(tour.startDate) }}</span>
            </div>
            <div class="tour-price">
              <span class="price">￥{{ tour.groupTourPrice }}<span class="price-unit">/人起</span></span>
              <el-button 
                type="primary" 
                size="small" 
                class="view-detail"
                @click="goToTourDetail(tour.groupTourID)">
                查看详情
              </el-button>
            </div>
            <div class="tour-recruit">
              <span class="recruit-text">招募人数：{{ tour.recruitmentNumber }}人</span>
              <span class="recruit-count">已报名：{{ tour.registrationCount || 0 }}人</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultAvatar from '@/assets/default-avatar.png'
import defaultTour from '@/assets/default-tour.jpg'
export default {
  name: 'AgencyHomeShow',
  data() {
    return {
      loading: true,
      agencyId: null,
      agencyInfo: {
        travelAgencyAvatar: '',
        travelAgencyName: '',
        province: '',
        city: '',
        officePhone: '',
        officeEmail: '',
        officeAddress: '',
        travelAgencyIntroduction: ''
      },
      tours: [],
      tourImages: {},
      defaultAvatar, // 直接用变量
      defaultTour
    }
  },
  created() {
    this.agencyId = this.$route.params.id;
    this.fetchAgencyInfo();
    this.fetchAgencyTours();
  },
  methods: {
    async fetchAgencyInfo() {
      try {
        const response = await this.$http.get(`/mw/travelAgency/${this.agencyId}`);
        
        // 根据后端实体类TravelAgencyDetail修正字段映射
        this.agencyInfo = {
          travelAgencyAvatar: response.data.travelAgencyAvatar,
          travelAgencyName: response.data.travelAgencyName,
          province: response.data.province,
          city: response.data.city,
          officePhone: response.data.officePhone,
          officeEmail: response.data.officeEmail,
          officeAddress: response.data.officeAddress,
          travelAgencyIntroduction: response.data.travelAgencyIntroduction
        };
      } catch (error) {
        console.error('获取旅行社信息失败:', error);
        this.$message.error('获取旅行社信息失败');
      }
    },
    
    async fetchAgencyTours() {
      try {
        const response = await this.$http.get('/mw/agency/groupTours', {
          params: { agencyId: this.agencyId }
        });
        this.tours = response.data || [];
        
        // 为每个跟团游获取图片
        await this.fetchTourImages();
      } catch (error) {
        console.error('获取跟团游列表失败:', error);
        this.$message.error('获取跟团游列表失败');
      } finally {
        this.loading = false;
      }
    },
    
    async fetchTourImages() {
      const imagePromises = this.tours.map(async tour => {
        try {
          // 调试：打印 groupTourID
          console.log('Fetching image for groupTourId:', tour.groupTourID);
          if (tour.groupTourID) { // 只有当 groupTourID 存在时才发送请求
            const response = await this.$http.get('/mw/groupTourImages', {
              params: { groupTourId: tour.groupTourID }
            });
            
            // 直接在 tour 对象上设置 mainImage 属性，方便后续使用
            if (response.data && response.data.length > 0) {
              tour.mainImage = response.data[0].groupTourImageLink;
            } else {
              tour.mainImage = this.defaultTour;
            }
          } else {
            console.warn('groupTourID is missing for a tour, skipping image fetch.', tour);
            tour.mainImage = this.defaultTour;
          }
        } catch (error) {
          console.error(`获取跟团游 ${tour.groupTourID} 图片失败:`, error);
          tour.mainImage = this.defaultTour;
        }
      });
      
      await Promise.all(imagePromises);
    },
    
    getTourImage(groupTourID) {
      // 现在直接从 tour 对象获取 mainImage
      const tour = this.tours.find(t => t.groupTourID === groupTourID);
      return tour ? tour.mainImage : this.defaultTour;
    },
    
    calculateDuration(startDate, endDate) {
      if (!startDate || !endDate) return 0;
      const start = new Date(startDate);
      const end = new Date(endDate);
      const diffTime = Math.abs(end - start);
      return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 包含首尾
    },
    
    formatDate(dateString) {
      if (!dateString) return '';
      return new Date(dateString).toLocaleDateString();
    },
    
    goToTourDetail(groupTourID) {
      this.$router.push({ path: `/homepage/group-tour/detail/${groupTourID}` });
    }
  }
}
</script>

<style scoped>
.agency-home-container {
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 背景图片和渐变 */
.agency-home-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 91, 149, 0.8)),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  z-index: 0;
  pointer-events: none;
}

/* 保证内容在背景之上 */
.agency-home-container > * {
  position: relative;
  z-index: 1;
}
.agency-info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.agency-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* 左侧头像区域 */
.agency-avatar-container {
  width: 240px;
  margin-right: 30px;
  flex-shrink: 0;
}

.agency-avatar {
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 右侧基本信息区域 */
.agency-basic {
  flex-grow: 1;
}

.agency-name {
  font-size: 28px;
  margin: 0 0 15px 0;
  color: #333;
  font-weight: 600;
}

.agency-meta {
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  color: #555;
}

.meta-item i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 18px;
}

.meta-text {
  flex-grow: 1;
}

/* 简介区域 */
.agency-description {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin-top: 20px;
}

/* 跟团游列表区域 */
.tours-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.tour-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.tour-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tour-image {
  height: 180px;
  overflow: hidden;
}

.tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.tour-card:hover .tour-image img {
  transform: scale(1.05);
}

.tour-content {
  padding: 15px;
}

.tour-title {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #333;
}

.tour-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.tour-meta .meta-item {
  margin-right: 15px;
}

.tour-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b6b;
}

.price-unit {
  font-size: 14px;
  font-weight: normal;
  color: #999;
}

.view-detail {
  padding: 8px 15px;
}

.tour-recruit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}
.no-tours {
  text-align: center;
  padding: 40px 0;
}

.tour-recruit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.recruit-count {
  color: #ff6b6b;
  font-weight: bold;
}

.agency-home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding-top: 80px;
  box-sizing: border-box;
}

.top-spacer {
  height: 80px;
  width: 100%;
}

.agency-info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.agency-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.agency-avatar-container {
  width: 240px;
  margin-right: 30px;
  flex-shrink: 0;
}

.agency-avatar {
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agency-basic {
  flex-grow: 1;
}

.agency-name {
  font-size: 28px;
  margin: 0 0 15px 0;
  color: #333;
  font-weight: 600;
}

.agency-meta {
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  color: #555;
}

.meta-item i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 18px;
}

.meta-text {
  flex-grow: 1;
}

.agency-description {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin-top: 20px;
}

.tours-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.tour-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.tour-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tour-image {
  height: 180px;
  overflow: hidden;
}

.tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.tour-card:hover .tour-image img {
  transform: scale(1.05);
}

.tour-content {
  padding: 15px;
}

.tour-title {
  font-size: 18px;
  margin: 0 0 10px 0;
  color: #333;
}

.tour-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.tour-meta .meta-item {
  margin-right: 15px;
}

.tour-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b6b;
}

.price-unit {
  font-size: 14px;
  font-weight: normal;
  color: #999;
}

.view-detail {
  padding: 8px 15px;
}
</style>